<template>
  <div class="fixed" v-dialogDrag>
    <div class="content el-dialog"
         style="padding:0">
      <div class="msgTop el-dialog__header">
        <span>工单改派</span>
        <i class="el-icon-close fr"
           style="cursor:pointer;line-height:40px;font-size:13px;"
           @click="cancelTransfer"></i>
      </div>
      <el-form :model="forms"
               ref="forms"
               :rules="rulesForms"
               class="demo-ruleForm"
               style="padding:20px 20px 0 20px">
        <el-row :gutter="20">
          <el-form-item label="改派方式："
                        label-width="100px"
                        prop="dealMethod">
            <el-radio-group v-model="forms.dealMethod"
                            @change="dealMethod">
              <el-radio label="1">节点处理人</el-radio>
              <el-radio label="2">任意处理人</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 节点处理人 -->
          <el-form-item label="处理人："
                        label-width="100px"
                        v-if="forms.dealMethod == '1'"
                        prop="userCurrentType">
            <el-select @change='getUserOptionList'
                       v-model="forms.userCurrentType"
                       filterable
                       clearable
                       disabled
                       placeholder="请选择类型">
              <el-option v-for="item in forms.nodeUserTypes"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <!--部门 -->
            <el-cascader v-if="deptShow == 'dept' || orderTransferInfo.assigneetype == 'dept'"
                         expand-trigger="hover"
                         v-model="forms.userOption"
                         filterable
                         :options="orderTransferInfo.assignee"
                         :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                         @change="handleChange">
            </el-cascader>
            <!-- 其他的 -->
            <el-select style="width:250px"
                       multiple
                       v-else
                       v-model="forms.userOption"
                       filterable
                       clearable
                       placeholder="请选择">
              <el-option :style="{'width':'200px','margin-left':'20px'}"
                         v-for="item in orderTransferInfo.assignee"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- 任意处理人 -->
          <el-form-item label="任意处理人："
                        label-width="100px"
                        v-if="forms.dealMethod == '2'"
                        prop="userType">
            <el-select @change='getUserOptionList'
                       v-model="forms.userType"
                       filterable
                       clearable
                       placeholder="请选择类型">
              <el-option v-for="item in forms.userTypes"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <!--部门 -->
            <el-cascader v-if="deptShow == 'dept'"
                         expand-trigger="hover"
                         :options="forms.userOptions"
                         :props="{value:'value',label:'label',children:'children',multiple: true,checkStrictly: true }"
                         v-model="forms.userOption"
                         filterable
                         @change="handleChange">
            </el-cascader>
            <!-- 其他的 -->
            <el-select style="width:250px"
                       multiple
                       v-else
                       v-model="forms.userOption"
                       filterable
                       clearable
                       placeholder="请选择">
              <el-option :style="{'width':'200px','margin-left':'20px'}"
                         v-for="item in forms.userOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label-width="10px"
                      class="center">
          <el-button @click="submitForm('forms')"
                     type="button"
                     class="el-button el-button--primary el-button--medium h30Btn ">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import { selectAllType, getUpdateCurrentHandler, selectAll } from '@/api/workOrderController'
export default {
  props: ['processInstanceId', 'ruleFormInfo', 'currentNodeId', 'orderTransferInfo', 'opration'],
  data () {
    return {
      statusId: "", // 改派后的节点id
      deptShow: '',
      forms: {
        dealMethod: '2',
        // userValue: [],
        // nodeVal: "", // 选择的节点流程id
        userType: "", // 一级数据值
        userCurrentType: this.orderTransferInfo.assigneetype || '', // 节点处理人的一级数据
        userTypes: [], // 一级数据下拉列表
        nodeUserTypes: [], // 节点当前处理人一级下拉数据
        userOption: [], // 二级数据值
        userOptions: [], // 二级数据下拉列表
        // userCurrentOptions:[], // 节点处理人的二级数据下拉列表
      },
      rulesForms: {
        userType: [
          { required: true, message: "请选择改派对象", trigger: ["blur"] }
        ],
        userCurrentType: [
          { required: true, message: "请选择改派对象", trigger: ["blur"] }
        ],
        dealMethod: [{
          required: true, message: "请选择处理方式", trigger: ["blur"]
        }],
      },
      workOrderIdList: []
    }
  },
  mounted () {
    this.selectAllType()
  },
  methods: {
    // 获取一级下拉数据
    getUserOptionList (val) {
      this.forms.userOption = []
      this.forms.userOptions = []
      // 争对部门数据打标识
      if (val == 'dept') {
        this.deptShow = 'dept'
      } else {
        this.deptShow = ''
      }
      selectAll(val).then(res => {
        if (res.data.retCode == 200) {
          this.forms.userOptions = res.data.data
          // this.orderTransferInfo.assignee = res.data.data
          console.log(this.orderTransferInfo.assignee)
        }
      })
    },
    // 获取一级数据
    selectAllType () {
      let _this = this
      selectAllType().then(res => {
        if (res.data.retCode === 200) {
          _this.forms.nodeUserTypes = res.data.data
          _this.forms.userTypes = res.data.data
          // 剔除角色
          let userTypeArr = []
          for (var i = 0; i < _this.forms.userTypes.length; i++) {
            userTypeArr.push(_this.forms.userTypes[i])
          }
          _this.forms.userType = 'user'
          _this.getUserOptionList('user')
          _this.forms.userTypes = userTypeArr
        }
      })
    },
    // 获取任意节点数据
    // 切换方式
    dealMethod (val) {
      this.forms.dealMethod = val
      if (val == '2') {
        this.selectAllType()
      }
      this.forms.userType = ''
      this.forms.userOption = []
    },
    cancelTransfer () {
      this.$emit('transferShow', false)
    },
    submitForm (formName) {
      this.workOrderIdList = JSON.parse(sessionStorage.getItem('workOrderIdList'))
      // 当按钮是转派的时候，传转派的状态
      if (this.ruleFormInfo.currentNodeDto.sequenceFlows) {
        for (var i = 0; i < this.ruleFormInfo.currentNodeDto.sequenceFlows.length; i++) {
          if (this.ruleFormInfo.currentNodeDto.sequenceFlows[i].type == 'gaipai') {
            this.statusId = this.ruleFormInfo.currentNodeDto.sequenceFlows[i].status
          }
        }
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            workOrderId: Number(this.$store.state.orderDetailsId), // 当前工单Id
            userId: this.$store.state.userId + '',
            roleType: this.forms.dealMethod == '1' ? this.forms.userCurrentType : (this.forms.dealMethod == '2' ? this.forms.userType : ''),
            roleIdList: this.forms.userOption, // 改派的处理人id
            workOrderStatus: this.statusId, // 工单状态
            currentHandlerName: '', // 该派的处理人名字
            processInstanceId: this.processInstanceId, // 流程实例id
            opration: this.opration // 按钮信息
          }
          getUpdateCurrentHandler(params).then(res => {
            if (res.data.retCode === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
              this.$emit('transferShow', true)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.center {
  text-align: center;
  font-size: 16px;
}

.paging-foot {
  padding: 10px 0;
}

</style>
